<template>
	<view>
		<view class="title">登录/注册</view>
		<view class="phone">
			<myselect styles='short' :lists='items' @sel='jshm'></myselect>
			<input type="number" placeholder="请输入手机号码" v-model='phone'>
		</view>
		<view class="submit"><button @click="tz" :disabled="phone==''?true:false">发送验证码</button></view>
		<view class="sm">
			<text>点击按钮表示您同意并愿意遵守</text>
			<view><text class="xie" @click="tzx">《隐私协议》</text>和<text class="xie" @click="tzx">《服务声明》</text></view>
		</view>
		
		<view class="other">
			<view></view>
			<view>或者</view>
		</view>
		<view class="gg">
			<text>先逛逛>></text>
		</view>
	</view>
</template>

<script>
	import { reactive,toRefs} from 'vue';
	import store from '../../../store/index.js'
	import http from '../../../utils/http.js'
	export default {
		setup(){
			let data = reactive({
				items:['号码','+86','+233','+778','+223'],
				hm:'',
				phone:'',
				tz:()=>{
					if(data.hm!=''){
						http({
							url:'/users/login',
							method:'post',
							data:{phone:data.phone}
						}).then((e)=>{
							console.log(e);
							if(e.data.code==200){
								store.commit('yzmset',e.data.yzm)
								store.commit('Setzt',1)
								store.commit('setUser',e.data.data[0])
								uni.redirectTo({
									url: '/pages/wxz/yzm/yzm'
								});
							}else{
								http({
									url:'/users/yzm'
								}).then((e)=>{
									store.commit('yzmset',e.data.yzm)
									store.commit('Setzt',0)
									uni.redirectTo({
										url: '/pages/wxz/yzm/yzm'
									});
								})
							}
							
						})
					}else{
						wx.showToast({
						  title: '请选择号码',
						  icon:'error',
						  duration: 2000
						})
					}
				},
				tzx:()=>{
					// var code=''
					// var token=''
					// 	wx.login({
					// 	  success(res) {
					// 		  console.log(res)
					// 		code = res.code
					// 		console.log(code);
					// 		wx.request({
					// 		  url: 'https://api.weixin.qq.com/cgi-bin/token',
					// 		  data: {
					// 			grant_type:'client_credential',
					// 			appid:'wx6e3e50e17e54ea8b',
					// 			secret:'e7567610e24673e3c06fbbf3088a8aca'
					// 		  },
					// 		  success: function (res) {
					// 			console.log(res)
					// 			token = res.data.access_token
					// 			console.log(token)
					// 			wx.request({
					// 				url:'https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token='+token,
					// 				data:{
					// 					code:code
					// 				},
					// 				method:'post',
					// 				success:function(res){
					// 					console.log(res)
					// 				}
					// 			})
					// 		  }
					// 		})
					// 	  }
					// })
					// wx.getUserProfile({
					// 	lang: 'zh_CN',
					// 	desc:'测试',
					// 	success:function(e){
					// 		console.log(e.userInfo);
					// 	}
					// })
					uni.navigateTo({
						url: '/pages/wxz/xieyi/xieyi'
					});
				},
				jshm:(e)=>{
					data.hm=e
				}
				
			})
			
			return {...toRefs(data)}
		}
	}
</script>

<style scoped lang="less">
page{
	background-color: #F5F5F9;	
}
.title{
	margin: 100rpx 0;
	font-size: 50rpx;
}
.phone{
	background-color: #FFFFFF;
	padding: 30rpx;
	border: 1px solid #D9D9D9;
	input{
		margin-left: 180rpx;
	}
}
.submit{
	margin: 40rpx;
	button{
		background-color: #118EE9;
		color: white;
	}
	button[disabled]{
		background-color: white;
		color: black;
	}
}
.sm{
	text-align: center;
	font-size: 30rpx;
}
.other{
	position: relative;
	margin-top: 200rpx;
	height: 50rpx;
	view:first-child{
		width: 500rpx;
		height: 25rpx;
		margin-left: -250rpx;
		line-height: 25rpx;
		border-bottom: 1px solid #D9D9D9;
	}
	view:last-child{
		text-align: center;
		width: 100rpx;
		margin-left: -50rpx;
		color: #D9D9D9;
		background-color: white;
		border: 1px solid #D9D9D9;
		border-radius: 30px;
	}
	view{
		position: absolute;
		left: 50%;
		line-height: 50rpx;
	}
}
.gg{
	position: absolute;
	width: 150rpx;
	text-align: center;
	bottom: 20rpx;
	left: 50%;
	margin-left: -75rpx;
}
.xie{
	color: blue;
}
</style>
